<script lang="ts" setup>
import {
  userCouponDetailOrderTableCol,
  queryUserInfoDetailOrderTableCol
} from '@/api/user/types/user'
import UserCouponTable from '@/components/table/UserCouponTable.vue'
import { queryUserInfoDetailOrderRequestData } from '@/api/user/types/user'
import { reactive, onActivated, defineAsyncComponent, ref } from 'vue'
import { queryUserInfoDetailOrder } from '@/api/user'
import { getToken } from '@/utils/cache/cookies'
import { useTable } from '@/hooks/useTable'
import { useRoute } from 'vue-router'
import PhoneForm from '@/components/form/PhoneForm.vue'

const route = useRoute()
const form = reactive<queryUserInfoDetailOrderRequestData>({
  phone: route.query.phone as string,
  orderId: route.query.orderId as string,
  type: '',
  selectType: 'userCoupon'
})
const handleFormSearch = () => {
  setCurrentPage(1)
  load()
}
const sendCouponDialog = defineAsyncComponent(() => import('@/components/dialog/GiftCoupon.vue'))
const sendCouponDialogRef = ref<InstanceType<typeof sendCouponDialog> | null>(null)
const openDialog = () => {
  sendCouponDialogRef.value?.setId(route.query.userId as string)
  sendCouponDialogRef.value?.open()
}
const { pagination, handleSizeChange, handleCurrentChange, data, loading, load, setCurrentPage } =
  useTable<queryUserInfoDetailOrderTableCol>(queryUserInfoDetailOrder, getToken() ?? '', () => form)
defineExpose({ load })
onActivated(() => {
  form.phone = route.query.phone as string
  form.orderId = route.query.orderId as string
})
</script>

<template>
  <div flex justify-between items-center>
    <phone-form v-model="form" @search="handleFormSearch" />
    <el-button type="primary" @click="openDialog">赠送优惠券</el-button>
  </div>
  <user-coupon-table page="1" v-loading="loading" :data="data as userCouponDetailOrderTableCol[]" />
  <div flex justify-end mt-20>
    <el-pagination
      @current-change="handleCurrentChange"
      @size-change="handleSizeChange"
      v-model:current-page="pagination.pageNum"
      v-model:page-size="pagination.pageSize"
      background
      :total="pagination.total"
      layout="total,prev,pager,next,jumper,sizes"
    />
  </div>
  <send-coupon-dialog ref="sendCouponDialogRef" @refresh="load" />
</template>

<style scoped></style>
